<template>
  <div class="container">
    <van-row>
      <van-col span="18">
        <div class="matr-name">{{value.matrName}}<span class="matr-spec">({{value.matrSpec}})</span></div>
        <div class="matr-lot">
          <span class="lot-label">lot</span>{{value.lot}}
          <span class="lot-exp">exp</span> {{value.expDate | formatDate("yyyy-MM-dd")}}
        </div>
        <div class="matr-uc">{{value.sn}} . {{value.rfid}}</div>
      </van-col>
      <van-col span="6">
        <div class="matr-qty">   {{value.packageQty}} {{value.packageUnit}}</div>
        <div class="matr-price align-right">￥ {{value.amount}} 元</div>
        <div class="matr-qty">{{value.skuQty}} {{value.skuUnit}}</div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  props: {
    value: Object
  },
  created() {
  },
  computed: {

  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
  $line-height:24px;
  .container {
    background-color: white;
    padding:10px 20px 10px 10px;
    border-radius: 5px;
  }
  .matr-img {
    width:70px;
    height:70px;
  }
  .matr-name, .matr-qty {
    padding-left: 10px;
    line-height: $line-height;
    font-size: 14px;
    font-weight: bold;
    color:#1f1f1f;
  }
  .matr-spec {
    font-size: 12px;
  }
  .matr-lot {
    padding-left: 10px;
    line-height: $line-height;
    font-size: 12px;
    color:#2f2f2f;
  }
  .lot-label {
    background-color: lightblue;
    color: white;
    padding: 0px 5px 0px 5px;
    margin-right:5px;
  }
  .lot-exp {
    background-color: lightgreen;
    color: white;
    padding: 0px 5px 0px 5px;
    margin-right:5px;
  }
  .matr-qty {
    text-align: right;
  }
  .matr-price {
    line-height: $line-height;
    font-size: 12px;
    color:#2f2f2f;
    text-align: right;
  }
  .matr-uc {
    line-height: $line-height;
    font-size: 12px;
    color:#2f2f2f;
    text-align: left;
  }
  .align-right {
    text-align: right;
  }
</style>
